<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Web时钟</title>
    <style>
        #app {
            text-align: center;
            padding: 50px;
        }

        .banner {
            width: 1000px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            box-shadow: 5px 5px 10px #888888;
            font-size: 48px;
            font-weight: bolder;
            background-color: #033592;
            color: #ffffff;
            margin: 0 auto;
            border-radius: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="banner">
        当前日期时间：{{ text|aFilter }}
    </div>
</div>
<script src="./js/vue.min.js"></script>
<script>
    var padDate = function (val) {
        return val < 10 ? "0" + val : val
    }
    var vm = new Vue({
        el: "#app",
        data: {
            text: null
        },
        created: function () {
            this.text = new Date();
        },
        mounted: function () {
            //声明一个变量指向Vue实例，保证作用域一致
            var _this = this;
            this.timer = setInterval(function () {
                _this.text = new Date();
            }, 1000);
        },
        beforeDestroy: function () {
            if (this.timer){
                //在Vue实例被销毁前，清楚定时器
                clearInterval(this.timer);
            }
                },
        filters: {
            aFilter: function (val) {
               var currdeat=new Date(val);
               var year=currdeat.getFullYear();
               var month=padDate(currdeat.getMonth()+1);
               var day=padDate(currdeat.getDate());
               var hours=padDate(currdeat.getHours());
               var minutes=padDate(currdeat.getMinutes());
               var seconds=padDate(currdeat.getSeconds());
               return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            }
        }
    });
</script>
</body>
</html>